<template>
  <div class="home">
    <div class="home-head">Home</div>
    <div class="home-body">
      <div class="sidebar">
        <div class="testLog">
          <button @click="logPageMsg">打印page信息</button><br />
          <button @click="loadZip_test">加载压缩包</button><br />
          <button @click="loadTDS_test">加载3ds到场景</button><br />
          <button @click="loadTDS_test2">加载3ds压缩包到场景</button><br />
          <button @click="loadObj_test">加载obj模型到场景</button><br />
          <button @click="loadGLTF_test">加载gltf模型到场景</button><br />
        </div>
      </div>
      <div class="container" ref="Canvas3DContainerRef"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
// import { HouseApplication } from '../houseDesign/application/HouseApplication'
import { TestApplication } from '@/RoomDesign/application/TestApplication'

const Canvas3DContainerRef = ref<HTMLDivElement>()
const houseApp: TestApplication = new TestApplication()

onMounted(() => {
  const container = Canvas3DContainerRef.value
  if (container) {
    // container.innerHTML = 'Hello World'
    houseApp.initHouseDesignScene3D(container)
    // houseApp.test()
    houseApp.testCreateZone()

    // 测试是否可以加载zip
    // houseApp.testLoadZip()
    houseApp.initGui();
  }
})

const logPageMsg = () => {
  houseApp.testLogPage()
}

const loadZip_test = () => {
  houseApp.testLoadZip()
}

const loadTDS_test = () => {
  houseApp.testLoad3DS()
}

const loadTDS_test2 = () => {
  houseApp.testLoad3DSZip()
}

const loadObj_test = () => {
  houseApp.testLoadObjModel()
}

const loadGLTF_test = () => {
  houseApp.testLoadGLTFModel();
}

// defineExpose({
//   logPageMsg,
// })
</script>

<style lang="css" scoped>
.home {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
}

.home div {
  flex-shrink: 1;
}

.home-head {
  display: block;
  flex: 0 0 auto;
  /* 页头高度根据内容自适应，不自动伸展 */
  background-color: aqua;
}

.home-body {
  /* display: block; */
  display: flex;
  width: 100vw;
  flex: 1 1 auto;
  /* 身体部分伸展占据剩余空间 */
  background-color: #eee;
}

.sidebar {
  display: block;
  width: 16%;
}

.container {
  width: 84%;
  background-color: white;
}
</style>
